<html lang="zh-CN">



<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简易多功能记事本</title>
    <link rel="stylesheet" href="styles.css"><style>
        .notebook {

            width: 600px;

            height: 600px;

            margin: 50px auto;

            border: 1px solid black;

            border-radius: 10px;

            background-image: url('1.jpg');
            background-size: 600px;

            padding: 10px;

        }



        input {

            width: 200px;

            padding: 5px;

            margin-right: 5px;

        }



        button {

            padding: 5px 10px;

            margin-bottom: 5px;

        }



        ul {

            list-style-type: none;

            padding: 0;

        }



        li {

            margin: 5px 0;

            padding: 5px;

            background-color: #ffffcc;

            border-radius: 5px;

        }
         
    </style>

</head>



<body>

    <div class="notebook">

    <input type="text" id="inputText" placeholder="在这里输入内容">

        <button id="addButton">添加</button>

        <button id="searchButton">搜索</button>

        <button id="clearButton">清空</button>

        <button id="reverseButton">倒序</button>

        <button id="changeBgButton">更换背景</button>

        <ul id="noteList"></ul>

            </div>

       
    <script src="script.js"></script>

       
    <script>

        const addButton = document.getElementById('addButton');

        const searchButton = document.getElementById('searchButton');

        const clearButton = document.getElementById('clearButton');

        const reverseButton = document.getElementById('reverseButton');

        const changeBgButton = document.getElementById('changeBgButton');

        const inputText = document.getElementById('inputText');

        const noteList = document.getElementById('noteList');

        addButton.addEventListener('click', () => {

            const text = inputText.value;

            if (text.trim() !== '') {

                const li = document.createElement('li');

                li.textContent = noteList.children.length + 1 + '. ' + text;

                noteList.appendChild(li);

                inputText.value = '';

            }

        });

        searchButton.addEventListener('click', () => {

            const searchText = inputText.value.toLowerCase();

            const listItems = noteList.querySelectorAll('li');

            listItems.forEach((item) => {

                const itemText = item.textContent.toLowerCase();

                if (itemText.includes(searchText)) {

                    item.style.display = 'block';

                } else {

                    item.style.display = 'none';

                }

            });

        });

        clearButton.addEventListener('click', () => {

            noteList.innerHTML = '';

        });

        reverseButton.addEventListener('click', () => {

            const items = [];

            const listItems = noteList.querySelectorAll('li');

            listItems.forEach((item) => {

                items.push(item);

            });

            noteList.innerHTML = '';

            items.reverse().forEach((item) => {

                noteList.appendChild(item);

            });

        });

        changeBgButton.addEventListener('click', () => {

            const body = document.querySelector('body');

            const currentBg = body.style.backgroundColor;

            if (currentBg === 'lightyellow') {

                body.style.backgroundColor = 'lightblue';

            }

            else {

                body.style.backgroundColor = 'lightyellow';

            }

        });



    </script>

</body>



</html>